<template>
	<view class="search-history" v-if="show && history.length > 0" @tap.stop>
		<view class="history-header">
			<text class="history-title">搜索历史</text>
			<text class="clear-history" @tap.stop="clearHistory">清空历史</text>
		</view>
		<view class="history-list">
			<view 
				class="history-item" 
				v-for="(item, index) in history" 
				:key="index"
				@tap.stop="selectItem(item)"
			>
				{{item}}
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义组件属性
const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	history: {
		type: Array,
		default: () => []
	}
})

// 定义事件
const emit = defineEmits(['select', 'clear'])

// 选择历史记录项
const selectItem = (item) => {
	emit('select', item)
}

// 清空历史记录
const clearHistory = () => {
	emit('clear')
}
</script>

<style lang="scss" scoped>
// 搜索历史记录样式
.search-history {
	position: absolute;
	top: 110rpx;
	left: 30rpx;
	right: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	z-index: 999;
	padding: 20rpx;
	max-height: 600rpx;
	overflow-y: auto;
	
	.history-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 15rpx;
		border-bottom: 1px solid #f5f5f5;
		
		.history-title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
		
		.clear-history {
			font-size: 24rpx;
			color: #999;
			padding: 6rpx 10rpx;
		}
	}
	
	.history-list {
		display: flex;
		flex-wrap: wrap;
		
		.history-item {
			background-color: #f5f5f5;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
			margin: 0 20rpx 20rpx 0;
			font-size: 24rpx;
			color: #666;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
		}
	}
}
</style> 